<template>
  <div>
    <tableComp
      :selectMap="selectMap"
      @getList="getList"
      :total="total"
      ref="tableComp"
      :labelWidth="120"
      :tableWidth="100"
      :tableData="tableData"
      :column="column"
    >
      <template slot="product_img" slot-scope="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.product_img"
          :fit="fit"
        ></el-image>
      </template>
      <template slot="poster_img" slot-scope="scope">
        <el-image
          style="width: 100px"
          :src="scope.row.poster_img"
          :fit="fit"
        ></el-image>
      </template>
      <template slot="statusName" slot-scope="scope">
        <el-select
          size="small"
          @change="
            (e) => {
              onChangeStatus(e, scope.row);
            }
          "
          v-model="scope.row.status"
          style="width: 200px"
        >
          <el-option
            v-for="(item, index) in statusList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
    </tableComp>
  </div>
</template>

<script>
import { promoterOrderList, UpdateOrderStatus } from "@/api/order";
import customPage from "@/components/customPage";
export default {
  components: { customPage },
  props: ["shopname"],
  data() {
    return {
      tableData: [],
      total: 0,
      //1 待下单  2待审核 3已发货 4已结算  5审核不过
      statusList: [
        {
          label: "待下单",
          value: 1,
        },
        {
          label: "待审核",
          value: 2,
        },
        {
          label: "已发货",
          value: 3,
        },
        {
          label: "已结算",
          value: 4,
        },
        {
          label: "审核不过",
          value: 5,
        },
      ],
      selectMap: {
        keyword: [],
      },
      column: [
        {
          label: "id",
          fixed: true,
          prop: "id",
        },
        {
          label: "订单编号",
          prop: "trade_no",
        },
        {
          label: "姓名",
          search: {
            type: "input",
          },
          prop: "user_name",
        },
        {
          label: "手机号",
          prop: "user_phone",
        },
        {
          label: "订单状态",
          slot: true,
          prop: "statusName",
          width: 250,
        },
        {
          label: "创建时间",
          prop: "create_time",
        },
        {
          label: "产品名称",
          prop: "product_name",
        },
        {
          label: "返佣方式",
          prop: "price_type_desc",
        },
        {
          label: "返佣金额",
          prop: "price",
        },
        {
          label: "结算方式",
          prop: "profit_data",
        },
        {
          label: "最高佣金",
          prop: "most_share_money",
        },
        {
          label: "通过率",
          prop: "pase_rate",
        },
        {
          label: "产品标签",
          prop: "act_label_desc",
        },
        {
          label: "推广员姓名",
          prop: "promoter_name",
        },
        {
          label: "推广员身份证",
          prop: "promoter_cardNo",
        },
        {
          label: "推广员号码",
          prop: "promoter_phone",
        },
        {
          label: "引流费用",
          prop: "drainage_fee",
        },
      ],
    };
  },
  mounted() {
    this.$refs.tableComp.getList();
  },
  methods: {
    getList({ flag, params }) {
      if (!flag) {
        this.tableData = [];
      }
      promoterOrderList(params).then((res) => {
        this.tableData = res.data || [];
        this.total = res.total;
      });
    },
    onChangeStatus(val, row) {
      console.log(val, row);
      if (val != 5) {
        UpdateOrderStatus({
          id: row.id,
          promoter_id:row.promoter_id,
          product_id:row.product_id,
          status: val,
          reason: "",
        }).then(() => {
          this.$refs.tableComp.getList();
        });
      } else {
        this.$prompt("请输入审核不过的原因").then((res) => {
          if (res.action == 'confirm') {
            UpdateOrderStatus({
              id: row.id,
              promoter_id:row.promoter_id,
              product_id:row.product_id,
              status: val,
              reason: res.value,
            }).then(()=>{
              this.$refs.tableComp.getList();
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
